<template>
  <div id="app">
    <!--   路由站位符 -->
    <router-view></router-view>

    <!-- webrtc 相关的audio -->
    <div class="webrtc">
      <!-- 对方的音频 -->
      <audio id="othersAudio"
             autoplay></audio>

      <video id="myVideo"
             style="width:100px;height:100px;z-index:100000;"
             autoplay></video>
      <video id="othersVideo"
             style="width:100px;height:100px;z-index:100000;"
             autoplay></video>
    </div>
    <!-- 底部tab -->
    <foot v-if="currentFootBar.showBar"
          :active="currentFootBar.active"></foot>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "app",
  // 构建默认数据
  data () {
    return {
      // 默认登录后的页面
      currentFootBar: {
        path: '/',
        showBar: false,
        active: 0,
      },

      // 常量属性
      footBarList: [{
        path: '/message',
        showBar: true,
        active: 0,
      },
      {
        path: '/contact',
        showBar: true,
        active: 1,
      },
      {
        path: '/square',
        showBar: true,
        active: 2,
      },
      {
        path: '/meeting',
        showBar: true,
        active: 3,
      },
      {
        path: '/user',
        showBar: true,
        active: 4,
      }
      ],
    };
  },
  // 全局方法
  methods: {
    // 监听方法
    onmessage (data) {

      if (data.messageType === SOCKET_CONSTANT.PACKET.MESSAGE_TYPE.WEBRTC_SIGNALING) {
        var from = data.message.getFrom();
        var contentType = data.message.getContentType();
        var content = {};
        if (contentType === SOCKET_CONSTANT.PACKET.MESSAGE_CONTENT_TYPE.TEXT_CONTENT) {
          content = JSON.parse(data.message.getContent())
        }
        let webrtc = this.$store.state.webrtc;

        if (webrtc) {
          if (content.type === 'answer') {
            webrtc.addRemoteAnswer(content.sdp)
          } else if (content.type === 'ice-candidate') {
            console.log("发送方/接收方==>接收到远端发送的ice候选者信息,并添加进入连接")
            webrtc.addIceCandidate(content.sdp)
          } else if (content.type == 'agree-call') {
            // 对方接听后，接收方则取消延时关闭
            let maxDelayReceiveTime = this.$store.state.maxDelayReceiveTime;
            clearTimeout(maxDelayReceiveTime);
            webrtc.start();
          } else if (content.type === 'offer') {
            webrtc.addRemoteOffer(content.sdp);
          } else if (content.type === 'hungup') {

            let currentRouterPath = this.$route.path
            if (currentRouterPath === '/chat/user-chat') {
              this.$router.replace({ name: "Empty", params: { identity: from, singllingType: "hungup" } });
            } else {
              // 暂时不考虑
            }

          } else {
            // 当前有正在通话
            console.error("当前有正在通话!");
          }
        } else {
          // 接收方接收到call
          if (content.type === 'yuyin-call') {
            // 应该直接跳转页面然后打开待接收弹框
            // 判断当前路由是否是用户聊天页面，如果是则弹框，不是则跳转到聊天页面
            let currentRouterPath = this.$route.path
            if (currentRouterPath === '/chat/user-chat') {
              this.$router.replace({ name: "Empty", params: { identity: from, singllingType: "yuyin-call" } });
            } else {
              this.$router.replace({ name: "UserChat", params: { webrtc: "yuyin-call", identity: from } });
            }
            return;
          } else if (content.type = 'shipin-call') {
            this.$router.replace({ name: "P2PVideo", params: { identity: from } });
          }

        }
      }



      // 信令服务器类型
      // if (data.messageType === SOCKET_CONSTANT.PACKET.MESSAGE_TYPE.WEBRTC_SIGNALING) {
      //   var contentType = data.message.getContentType();
      //   var from = data.message.getFrom();
      //   var content = {};
      //   if (contentType === SOCKET_CONSTANT.PACKET.MESSAGE_CONTENT_TYPE.TEXT_CONTENT) {
      //     content = JSON.parse(data.message.getContent())
      //   }
      //   let webrtc = this.$store.state.webrtc;
      //   let socket = this.$store.state.socket;
      //   if (webrtc) {
      //     if (content.type === 'answer') {
      //       console.log("发送方==>接收到远端answer sdp 信息，并设置远端sdp")
      //       // 对方接听后，接收方则取消延时关闭
      //       let maxDelayReceiveTime = this.$store.state.maxDelayReceiveTime;
      //       clearTimeout(maxDelayReceiveTime);
      //       webrtc.setRemoteDescription(content.sdp)
      //     } else if (content.type === 'ice-candidate') {
      //       console.log("发送方/接收方==>接收到远端发送的ice候选者信息,并添加进入连接")
      //       webrtc.addIceCandidate(content.sdp)
      //     } else {
      //       // 如果有正在通话的任务则，拒绝对方通话，并给个提示
      //       if (socket) {
      //         // 发送一条通知的消息，告诉发送方对方有正在进行的任务（也可以让对方选择是否接入进来同时聊天。。。。这都是后话了）
      //         // let pChatMessage = new proto.com.ouyu.im.Message();
      //         // pChatMessage.setFrom(this.$socket.config.identity)
      //         // pChatMessage.setTo(this.to)
      //         // pChatMessage.setContentType(SOCKET_CONSTANT.PACKET.MESSAGE_CONTENT_TYPE.TEXT_CONTENT);
      //         // pChatMessage.setContent(this.chatContent);
      //         // // 时间戳毫秒
      //         // pChatMessage.setCreateTime(new Date().getTime());
      //         // var msgId = socket.send(pChatMessage, SOCKET_CONSTANT.PACKET.MESSAGE_TYPE.IM_P_CHAT);
      //       }
      //     }
      //     return;
      //   } else {
      //     if (content.type === 'yuyin-call') {
      //       // 应该直接跳转页面然后打开待接收弹框
      //       this.$router.replace({ name: "UserChat", params: { webrtc: "yuyin-call", identity: from } });
      //       return;
      //     }
      //     if (content.type === 'offer') {
      //       console.log("接收到发送方offer请求")
      //       let webrtc = Webrtc.init(socket, (webrtc) => {
      //         this.$store.commit('setWebrtc', webrtc)
      //         this.$store.commit('setWebrtcOfferMessage', data.message)
      //       });


      //     }
      //   }
      // }
    }
  },
  watch: {
    // 循环匹配判断当前的路由,决定是否显示底部tabbar
    $route (to, from) {
      var findFlag = true;
      this.footBarList.forEach(footBar => {
        if (to.path === footBar.path) {
          this.currentFootBar = footBar;
          findFlag = false;
          return;
        }
      });
      if (findFlag) {
        // 默认不显示
        this.currentFootBar = {
          path: '/',
          showBar: false,
          active: 0,
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.$emitter.on('onmessage', this.onmessage);
    //禁止浏览器的body 滚动条
    document.body.style.overflow = "hidden";
  },
};
</script>

<style lang="less" scoped>
.webrtc {
  visibility: hidden;
  opacity: 0;
}
</style>
